<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <!--jquery-form-->
    <script type="text/javascript" src="jquery.form.js"></script>
    <!--artdialog-->
    <script src="artDialog_v4.0.3/jquery.artDialog.js?skin=default"></script>
    <script src="artDialog_v4.0.3/artDialog.iframeTools.js"></script>

    <title>无标题文档</title>
</head>

<style>
    #content {
        width: 90%;
        margin: auto;
        padding: 20px;
        background-color: #f0f0f0;
    }

    #fileForm {
        margin-left: 200px;
    }

    #show-result {
        width: 90%;
        margin: auto;
        padding: 20px;
        background-color: #fff;
        margin-top: 10px;
    }

    #show-files-url {
        width: 90%;
        margin: auto;
        padding: 20px;
        background-color: #fff;
    }

    #pics-show {
        width: 90%;
        margin: auto;
        padding: 20px;
        background-color: #fff;
    }

    .fileImage {
        max-width: 400px;
        margin: auto;
        margin-top: 10px;
        border: 10px solid #fefefe;
    }
</style>


<script type="text/javascript">
    $(document).ready(function () {
        $("#fileForm").ajaxForm(function (json) {
            jsonobj = eval('(' + json + ')');

            if(jsonobj.status===true){
                art.dialog.data('pics',jsonobj.pics);// 存储数据
                top.art.dialog({id: 'dg_uploadfile'}).close();

            }else{
                $("#show-result").html(jsonobj.msg).show();
                $("#show-files-url").html(jsonobj.pics.join("<br>"));
            }
        });
    });


    function getImages(element) {
        //清除图片url
        $("#pics-show").html("");
        var obj = document.getElementById(element);
        var length = obj.files.length;
        var html = "";
        for (var i = 0; i < length; i++) {
            var thissrc = window.URL.createObjectURL(obj.files[i]);
            html += "<img class='fileImage' src=" + thissrc + " />";
        }
        $("#pics-show").append(html);
    }

</script>
<body>
<div id="content">
    <form id="fileForm" method="post" action="UploadAct.php">
        <input id="files" type="file" name="files[]" multiple onchange="getImages('files')">
        <input type="submit" value="提交">
    </form>
    <div id="pics-show">待上传图片展示区</div>
    <div type="text" id="show-result">上传结果信息区</div>
    <div type="text" id="show-files-url"></div>
</div>
</body>
</html>
